<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.object {
	margin: 5px;
	padding: 10px;
	background-color: #8ABD93;
}

.contact,.actions {
	margin: 5px;
	padding: 10px;
	background-color: #718E76;
}

.action {
	margin: 5px;
	padding: 10px;
	background-color: #2D7B3A;
}
</style>

<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/pure.js"></script>
<script type="text/javascript" src="../js/dasding.js"></script>
<script type="text/javascript">
	var directive = {
		'h1.name' : 'name',
		'p.description' : 'description',
		'p.id+' : 'id',
		'a.contactName' : 'contact.name',
		'a.contactName@href+' : 'contact.id',
		'li.contactPhone+' : 'contact.phone',
		'li.contactMail+' : 'contact.mail',
		'a.delete@href+' : 'id',
		'a.cancel@href+' : 'id',
		'p.time+' : 'time',
		'p.status+' : 'status',
		'p.category+' : 'category.name',
		'a.responsible+' : 'responsible.name',
		'a.responsible@href+' : 'responsible.id',
		'a.edit@href+' : 'id',
		'a.add@href+' : 'id',
		'div.action' : {
			'action<-actions.action' : {
				'a.name' : 'action.name',
				'a.name@href+' : 'action.id',
				'a.aedit@href+' : 'action.id',
				'a.acancel@href+' : 'action.id',
				'span.state' : 'action.status'
			}
		}
	};
</script>
<script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
			url : "/dasding/api/events/id/" + getURLParameter('id'),
			success : function(data) {
				$('#data').render(data, directive);
			}
		});
	});
</script>

</head>
<body>

	<!-- HTML template -->
	<div id="data">
		<div class="object">
			<h1 class="name"></h1>
			<p class="description"></p>



			<div class="contact">
				<h2>Contact:</h2>
				<a class="contactName" href="showUser.html?id="></a>
				<ul>
					<li class="contactPhone">Phone:</li>
					<li class="contactMail">Mail:</li>
				</ul>
			</div>
			<div class="actions">
				<h2>Actions</h2>
				<div class="action">
					<a class="name" href="showAction.html?id="></a> <span class="state"></span><a
						class="aedit" href="addAction.html?actionid=">Edit</a> <a
						class="acancel" href="/dasding/api/actions/id/"
						onclick="deleteObject(event, this)">Delete</a>
				</div>
				<a class="add" href="addAction.html?eventid=">Add Action</a>
			</div>
			Responsible: <a class="responsible" href="showUser?id="></a>

			<p class="id">ID:</p>
			<p class="time">Time:</p>
			<p class="category">Category:</p>
			<p class="status">Status:</p>
			<a class="edit" href="addEvent.html?id=">Edit</a> <a class="delete"
				href="id=">Delete</a> <a class="cancel" href="id=">Cancel</a>
		</div>
	</div>
</body>
</html>
